﻿@model SalesPortal.Web.Models.EmployeeListingViewModel

@{
    ViewBag.Title = "Employee Listing";
}

<h2>Employee Listing</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<nav class="navbar navbar-inverse navbar-default">
    <div class="container-fluid">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

                @if (Model.TablePager.PrevPageNo > 0)
                {
                    <li>
                        <a href="@Url.Action("Index", new { p = Model.TablePager.PrevPageNo })"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> PREV </a>
                    </li>
                }
                else
                {
                    <li>
                        <a class="disabled"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> PREV <span class="sr-only">(current)</span></a>
                    </li>
                }

                @if (Model.TablePager.NextPageNo < Model.TablePager.TotalNumberOfPages)
                {
                    <li>
                        <a href="@Url.Action("Index", new { p = Model.TablePager.NextPageNo })"> NEXT <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
                    </li>
                }
                else
                {
                    <li>
                        <a class="disabled"> NEXT <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
                    </li>
                }

                <li>
                    <p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
                </li>

                @foreach (int num in Model.TablePager.RelatedPages)
                {
                    if (num == Model.TablePager.CurrentPageNo)
                    {
                        <li class="active"><a>@num.ToString("00")</a></li>
                    }
                    else
                    {
                        <li>
                            <a style="cursor:pointer;" onclick="goToPage(@num)">@num.ToString("00")</a>
                        </li>
                    }
                }

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Page Size <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">10 records per page</a></li>
                        <li class="active"><a href="#">25 records per page</a></li>
                        <li><a href="#">50 records per page</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li>
                    
                    <button type="button" class="btn btn-primary navbar-btn btn-link" data-toggle="modal" data-target="#recordsStatisticsModal">
                        <span class="glyphicon glyphicon-stats"></span>
                    </button>

                    <button type="button" class="btn btn-primary navbar-btn btn-link" data-toggle="modal" data-target="#sortRecordsModal">
                        <span class="glyphicon glyphicon-sort"></span> sort
                    </button>

                    <button type="button" class="btn btn-primary navbar-btn btn-link" data-toggle="modal" data-target="#filterRecordsModal">
                        <span class="glyphicon glyphicon-filter"></span> filter
                    </button>
                </li>
            </ul>
            @using (Html.BeginForm("Index", "Employee", FormMethod.Post, new { @class = "navbar-form navbar-right", role = "search", id = "pagejump_form" }))
            {
                <div class="form-group">
                    @Html.TextBox("p", string.Empty, new { @class = "form-control page-input text-center", placeholder = "page#", id = "pageNo" })
                </div>
                <button type="submit" class="btn btn-primary navbar-form-btn btn-xs"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Go </button>
            }
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<!-- Modal -->
<div class="modal fade" id="recordsStatisticsModal" tabindex="-1" role="dialog" aria-labelledby="recordsStatisticsModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Employee List Statistics</h4>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm("Index", "Employee", FormMethod.Post, new { @class = "form-horizontal" }))
                {
                    @Html.EditorFor(m => m.Filter)
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="sortRecordsModal" tabindex="-1" role="dialog" aria-labelledby="sortRecordsModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Sort</h4>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm("Index", "Employee", FormMethod.Post, new { @class = "form-horizontal" }))
                {
                    @Html.EditorFor(m => m.Filter)
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="filterRecordsModal" tabindex="-1" role="dialog" aria-labelledby="filterRecordsModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Filter</h4>
            </div>
            <div class="modal-body">
                @using (Html.BeginForm("Index", "Employee", FormMethod.Post, new { @class = "form-horizontal" }))
                {
                    @Html.EditorFor(m => m.Filter)
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<table class="table table-striped table-hover table-condensed" id="employeeList">
    <thead>
        <tr>
            <th class="col-md-1">
                Legal Name
            </th>
            <th class="col-md-1 nowrap">
                Date of Birth
            </th>
            <th class="col-md-1">
                Salary
            </th>
            <th class="col-md-1">
                Status
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: employees">
        <tr>
            <td class="nowrap" data-bind="text:LegalName"></td>
            <td data-bind="text:DateOfBirth"></td>
            <td data-bind="text:Salary"></td>
            <td data-bind="text:Status"></td>
            <td>
                <a data-bind="attr: { href: '/employee/Edit/' + Id }">Edit</a> |
                <a data-bind="attr: { href: '/employee/Details/' + Id }">Details</a> |
                <a data-bind="attr: { href: '/employee/Delete/' + Id }">Delete</a>
            </td>
        </tr> 
    </tbody>
</table>

@section scripts
{
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.4.5/numeral.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<script type="text/javascript" src="~/Scripts/employee.js"></script>
<script type="text/javascript" src="~/Scripts/ko/employee.js"></script>
<script type="text/javascript">

    function clearEmployeeFilterForm() {
        $("#Filter_LegalName").val("");                                     //Clear Full Name
        $("#Filter_StartDateOfBirth").data("kendoDatePicker").value(null);  //Clear Date of Birth (from)
        $("#Filter_EndDateOfBirth").data("kendoDatePicker").value(null);    //Clear Date of Birth (to)
        $("#Filter_StartSalary").data("kendoNumericTextBox").value(null);   //Clear Salary (from)
        $("#Filter_EndSalary").data("kendoNumericTextBox").value(null);     //Clear Salary (to)
        $("#Filter_Status").data("kendoDropDownList").value(null);          //Reset Status
    }

    function goToPage(pageNum)
    {
        $("#pagejump_form #pageNo").val(pageNum);
        $("#pagejump_form").submit();
    }

    $(document).ready(function () {

    });

</script>
}